import { Input, NavBar } from "antd-mobile"
import { useState } from "react"
import styles from "./index.module.scss"

type Props = {
  onClose: () => void
  value: string
  onUpdateName: (name: string) => void
}

const EditInput = ({ onClose, value, onUpdateName }: Props) => {
  // useState(初始值) 只会在函数第一次会创建时生效
  const [inputValue, setInputValue] = useState(value)
  // useEffect(() => {
  //   debugger
  //   // value 为 null 或 undefined 时，设置为默认值为空字符串
  //   setInputValue(value ?? "")
  // }, [value])
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        onBack={onClose}
        right={
          <span className="commit-btn" onClick={() => onUpdateName(inputValue)}>
            提交
          </span>
        }
      >
        编辑昵称
      </NavBar>

      <div className="edit-input-content">
        <h3>昵称</h3>

        <div className="input-wrap">
          <Input
            placeholder="请输入"
            value={inputValue}
            onChange={setInputValue}
          />
        </div>
      </div>
    </div>
  )
}

export default EditInput
